<template>
    <common-dialog :title="title" :base-dialog="roleDialog">
        <div slot="body">
            {{showData}}
            <el-form :model="user_dialog" :rules="rules" ref="user_dialog" size="mini" label-width="80px" slot="body">
                <el-form-item label="姓名" prop="user_name">
                    <el-input v-model="user_dialog.user_name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="登录帐号" prop="user_account">
                    <el-input v-model="user_dialog.user_account" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="员工编号" prop="user_number">
                    <el-input v-model="user_dialog.user_number" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="手机号码" prop="user_phone">
                    <el-input v-model="user_dialog.user_phone" :maxlength="11" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="user_sex">
                    <el-select placeholder="" v-model="user_dialog.user_sex">
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="部门" prop="user_depate">
                    <el-popover ref="popover4" placement="bottom" trigger="click">
                        <el-tree :data="allDepate" @node-click="clickItemTree" node-key="id" :accordion="true" ref="tree" highlight-current :props="defaultProps">
                        </el-tree>
                        <el-button slot="reference">{{this.user_dialog.chooseText.name}}</el-button>
                    </el-popover>
                </el-form-item>

                <el-form-item label="角色" prop="user_role">
                    <el-select placeholder="" v-model="user_dialog.user_role">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in allRoles" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="启用状态" prop="user_status">
                    <el-select placeholder="" v-model="user_dialog.user_status">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="" style="width:400px;">
                    <el-button type="primary" @click="addAndEditMenu('user_dialog')">确定</el-button>
                    <el-button type="primary" @click="cancelDialog('user_dialog')">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </common-dialog>
</template>

<<script>
import commonDialog from "@/components/Common/CommonDialog";
import { mapGetters } from "vuex";
export default {
    props:{
        roleDialog:{
            type:Boolean,
            default:false
        },
        title:{
            type:String,
            default:''
        },
        editData:{
            type:Object,
            default:{}
        }
    },
  data(){
      
      return{
      user_dialog: {
        user_id: "",
        user_name: "",
        user_account: "",
        user_password: "",
        user_number: "",
        user_phone: "",
        user_sex: "0",
        user_depate: "",
        user_role: "",
        user_status: "1",
        chooseText: { name: "选择部门" }
      },
      rules: {
        user_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        user_account: [{ required: true, message: "请输入登录帐号", trigger: "blur" }],
        user_number: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
        user_phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "请输入合法的手机号码",
            trigger: "blur"
          }
        ],
        user_depate: [{ required: true, message: "请选择部门", trigger: "blur" }],
        user_role: [{ required: true, message: "请选择角色", trigger: "blur" }],
      
      },
      
      defaultProps: {
        children: "childList",
        label: "name"
      }
      }
  },

    computed: {
    ...mapGetters({
      allDepate: "getAllDepatement",
      allRoles: "getAllRolesList",
    }),
 showData(){
        this.user_dialog=this.editData;
        this.user_dialog.user_depate =this.editData.chooseText.id||''
      }
  },
   components: {
    commonDialog
  },
  methods:{
   clickItemTree(item) {
      if (this.isSearch) {
        this.chooseText = item;
      } else {
        this.user_dialog.chooseText = item;
        this.user_dialog.user_depate = item.id;
      }
    },
     cancelDialog(formName) {
     this.$emit('cancelAndClick',{bool:false,isSearch:true})
     this.$refs[formName].resetFields();
    },
    addAndEditMenu(formName){
    this.$refs[formName].validate(valide => {
        if (valide) {
        let params=  {
            name: this.user_dialog.user_name,
            account: this.user_dialog.user_account,
            mobile: this.user_dialog.user_phone,
            status: this.user_dialog.user_status,
            role_id: this.user_dialog.user_role,
            dept_id: this.user_dialog.user_depate,
            sex: this.user_dialog.user_sex,
            user_no: this.user_dialog.user_number
          };
          this.$emit('addAndClick',params,formName)
        }
      });
    }

  }
}
</script>
